<template>
  <div class="firework-animation">
    <div
      id="player"
      ref="animationPlayer"
      :style="[playerSize]"
    />
  </div>
</template>
<script>
import lottie from 'lottie-web'
export default {
  name: '',
  props: {
    width: {
      type: String,
      default: '300px'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      options: {
        animationData: 'https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1705390692_qaVIPmNMsj.json'
      }
    }
  },
  computed: {
    playerSize() {
      return {
        width: '100%',
        height: '100%'
        // width: this.width,
        // height: this.height
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handleAnimation(e) {
      console.log('e --------->', e)
    },
    init() {
      lottie.loadAnimation({
        container: this.$refs.animationPlayer,
        renderer: 'canvas',
        loop: true,
        autoplay: true,
        path: this.options.animationData
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
